<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head th:replace="layouts::header">
    <script src="../../static/js/myChart.js"></script>
</head>
<body>

    <nav th:replace="layouts::navbar"></nav>

        <div class="container">
            <h3>主面板</h3>
            <p th:text="${versionNumber}"></p>
            <hr>
            <h4>当前项目</h4>
                <div class="row">
                    <div class="col-md-6">

                      <table class="table table-bordered table-striped">
                        <thead class="thead-dark">
                            <tr>
                              <th>项目名称</th>
                              <th>项目状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="aProject : ${projects}">
                              <td th:text="${aProject.name}"></td>
                              <td th:text="${aProject.stage}"></td>
                            </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="col-md-4">
                        <canvas id="myPieChart" height="50" width="50"></canvas>
                        <script>
                            let chartData = "[[${projectStatusData}]]"
                        </script>

                    </div>
                </div>

                <div>
                    <h4>当前学生</h4>
                    <div class="row">
                        <div class="col-md-6">
                    <table class="table table-bordered table-striped">
                        <thead class="thead-dark">
                        <tr>
                            <th>学生姓名</th>
                            <th>微信号</th>
                            <th>项目个数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="aStudent : ${studentProjects}">
                            <td th:text="${aStudent.name}"></td>
                            <td th:text="${aStudent.wechatId}"></td>
                            <td th:text="${aStudent.projectCount}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                </div>

         </div>

            <script type="text/javascript" th:src="@{js/myChart.js}"></script>
        </div>
</body>
</html>